<!--
 * @Description: 统计分析
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-09 14:22:56
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-06 11:48:24
 * @FilePath: /nhw/src/views/Work/StatisticalAnalysis/index.vue
-->
<template>
  <Layout class="statistical-analysis-container" title="统计分析" border>
    <Tabs v-model="active" swipe-threshold="4" swipeable animated>
      <Tab title="客流量分析">
        <div class="total">
          <div class="title-wrap">
            <div class="weather">2021年12月6日 晴天 10℃</div>
          </div>
          <Grid :column-num="3" :border="false">
            <GridItem>
              <div>
                <p>当日游客量</p>
                <p>{{ traffic.today }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <p>本周游客量</p>
                <p>{{ traffic.week }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <p>本月游客量</p>
                <p>{{ traffic.month }}</p>
              </div>
            </GridItem>
          </Grid>
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">景区入园方式统计分析</div>
            <TabMWD @onTabMWD="getTab($event, 'renderScenicComIn')" />
          </div>
          <EchartsPie :data="scenicComInData" roseType="radius" />
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">景区人流趋势图</div>
            <TabMWD @onTabMWD="getTab($event)" />
          </div>
          <EchartsLine
            :data="['20', '49', '120', '49', '120', '89']"
            :smooth="false"
          />
        </div>
      </Tab>
      <Tab title="隐患统计">
        <div class="total">
          <div class="title-wrap">
            <TabMWD @onTabMWD="getTab($event, 'renderRiskNum')" />
          </div>
          <Grid :column-num="3" :border="false">
            <GridItem>
              <div>
                <p>隐患数</p>
                <p>{{ riskNumArr[0] }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <p>随手拍</p>
                <p>{{ riskNumArr[1] }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <p>安全检查数</p>
                <p>{{ riskNumArr[2] }}</p>
              </div>
            </GridItem>
          </Grid>
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">隐患类别统计</div>
            <TabMWD @onTabMWD="getTab($event, 'renderRiskCategoryNum')" />
          </div>
          <EchartsBar
            :data="riskCategoryNumData.data"
            :tabName="riskCategoryNumData.tabName"
          />
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">部门隐患整改统计</div>
            <TabMWD @onTabMWD="getTab($event, 'renderRiskDepartNum')" />
          </div>
          <EchartsBarLine
            :data="riskDepartNumData.data"
            :tabName="riskDepartNumData.tabName"
          />
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">安全检查情况统计</div>
            <TabMWD @onTabMWD="getTab($event, 'renderRiskCheck')" />
          </div>
          <Row>
            <Col span="3">排行</Col>
            <Col span="9">姓名</Col>
            <Col span="5">代办任务数</Col>
            <Col span="7">检查问题任务数</Col>
          </Row>
          <div class="safety-total-wrap">
            <Row v-for="(item, index) in riskCheck" :key="index">
              <Col span="3" v-text="index <= 2 ? '' : index + 1"></Col>
              <Col span="9">{{ item.name }}</Col>
              <Col span="5">{{ item.unCheck }}</Col>
              <Col span="7">{{ item.checked }}</Col>
            </Row>
          </div>
        </div>
      </Tab>
      <Tab title="巡检统计">
        <div class="total">
          <div class="title-wrap">
            <TabMWD @onTabMWD="getTab($event, 'renderInspectionNum')" />
          </div>
          <Grid :column-num="3" :border="false">
            <GridItem>
              <div>
                <p>任务总数</p>
                <p>{{ inspectionNumArr[0] }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <p>已巡检</p>
                <p>{{ inspectionNumArr[1] }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div>
                <p>异常数</p>
                <p>{{ inspectionNumArr[2] }}</p>
              </div>
            </GridItem>
          </Grid>
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">巡检情况统计</div>
            <TabMWD @onTabMWD="getTab($event, 'renderInspectionSituation')" />
          </div>
          <LiquidFill :data="inspectionSituationArr" />
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">异常情况统计</div>
          </div>
          <EchartsLine
            :data="exceptionSituationData.data"
            :tabName="exceptionSituationData.tabName"
          />
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">巡检情况统计</div>
            <TabMWD @onTabMWD="getTab($event, 'renderCheckSituation')" />
          </div>
          <div v-if="checkSituation.length > 0">
            <Row>
              <Col span="3">排行</Col>
              <Col span="9">姓名</Col>
              <Col span="5">巡检任务数</Col>
              <Col span="7">发现异常数</Col>
            </Row>
            <div class="safety-total-wrap">
              <Row v-for="(item, index) in checkSituation" :key="index">
                <Col span="3" v-text="index <= 2 ? '' : index + 1"></Col>
                <Col span="9">{{ item.name }}</Col>
                <Col span="5">{{ item.taskNum }}</Col>
                <Col span="7">{{ item.errorNum }}</Col>
              </Row>
            </div>
          </div>
          <div class="error-msg" v-else>暂无数据</div>
        </div>
      </Tab>
      <Tab title="事故统计">
        <div class="total accident-title">
          <div class="day-time">
            安全天数<span class="day"
              ><i>{{ accidentInformationDay }}</i
              >天</span
            >
          </div>
          <div class="slogan">安全不怠，旅行愉快</div>
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">安全检查情况统计</div>
          </div>
          <div
            class="card-list"
            v-for="item in accidentInformationData"
            :key="item.firstDtm"
          >
            <CardTwig :left="item.name" :right="item.firstDtm" size=".37" />
            <CardTwig left="事故类型" :right="item.category" size=".37" />
            <CardTwig left="责任定性" :right="item.type" size=".37" />
            <CardTwig left="事故经过" :right="item.detail" size=".37" />
            <CardTwig
              left="人员伤亡、经济损失"
              :right="item.result"
              size=".37"
            />
          </div>
        </div>
      </Tab>
      <Tab title="作业统计">
        <div class="total">
          <div class="title-wrap">
            <div class="title">作业分析</div>
            <TabMWD @onTabMWD="getTab($event, 'renderWorkNum')" />
          </div>
          <Grid :column-num="3" :border="false">
            <GridItem>
              <div
                @click="handleWorkUpdata('all')"
                :class="this.workCurrNameTab == 'all' ? 'active' : ''"
              >
                <p>作业总数</p>
                <p>{{ workNumArr[0] }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div
                @click="handleWorkUpdata('ticket')"
                :class="this.workCurrNameTab == 'ticket' ? 'active' : ''"
              >
                <p>作业票数量</p>
                <p>{{ workNumArr[1] }}</p>
              </div>
            </GridItem>
            <GridItem>
              <div
                @click="handleWorkUpdata('ongoing')"
                :class="this.workCurrNameTab == 'ongoing' ? 'active' : ''"
              >
                <p>正在进行数量</p>
                <p>{{ workNumArr[2] }}</p>
              </div>
            </GridItem>
          </Grid>

          <EchartsPie :data="totalJobsDataArr" />
        </div>
        <div class="total">
          <div class="title-wrap">
            <div class="title">近半年作业情况统计</div>
          </div>
          <EchartsBar
            :data="halfYearWorkNumArr"
            :tabName="halfYearWorkTabNameArr"
          />
        </div>
      </Tab>
    </Tabs>
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import EchartsBar from "components/Echarts/EchartsBar";
import EchartsBarLine from "components/Echarts/EchartsBarLine";
import EchartsPie from "components/Echarts/EchartsPie";
import LiquidFill from "components/Echarts/LiquidFill";
import EchartsLine from "components/Echarts/EchartsLine";
import TabMWD from "./components/TabMWD.vue";
import CardTwig from "components/Card/CardTwig";
import { Tab, Tabs, Grid, GridItem, Col, Row } from "vant";

import {
  queryRiskNum,
  queryRiskCategoryNum,
  queryRiskDepartNum,
  queryRiskCheck,
  queryInspectionNum,
  queryExceptionSituation,
  queryInspectionSituation,
  queryCheckSituation,
  queryWorkNum,
  queryTotalJobs,
  queryHalfYearWork,
  queryAccidentInformation,
  getScenicComIn,
  getGroupComIn,
} from "@/api/statisticalAnalysis.js";

export default {
  name: "StatisticalAnalysis",

  components: {
    Layout,
    EchartsBar,
    EchartsBarLine,
    EchartsPie,
    LiquidFill,
    EchartsLine,
    TabMWD,
    CardTwig,
    Tab,
    Tabs,
    Grid,
    GridItem,
    Col,
    Row,
  },
  data() {
    return {
      orgNo: "",
      active: 0,
      //隐患统计
      riskNumArr: [],
      riskCategoryNumData: {
        data: [],
        tabName: [],
      },
      riskDepartNumData: {
        data: {
          bar1Data: [],
          bar1Data: [],
          bar1Data: [],
        },
        tabName: [],
      },
      riskCheck: [],
      //巡检统计
      inspectionNumArr: [],
      inspectionSituationArr: [],
      exceptionSituationData: {
        data: [],
        tabName: [],
      },
      checkSituation: [],
      //作业统计
      workCurrDataTab: "day", // day week month
      workCurrNameTab: "all", // 数据类型(all 作业总数,ticket 作业票数量,ongoing 正在进行数量)
      workNumArr: [],
      totalJobsDataArr: [],
      halfYearWorkTabNameArr: [],
      halfYearWorkNumArr: [],
      //事故统计
      accidentInformationData: [],
      accidentInformationDay: 0,
      //客流量分析
      scenicComInData: [],
      traffic: {},
    };
  },

  created() {
    this.orgNo = window.localStorage.getItem("orgNo");

    this.renderRiskNum("day");
    this.renderRiskCategoryNum("day");
    this.renderRiskDepartNum("day");
    this.renderRiskCheck("day");
    this.renderInspectionNum("day");
    this.renderExceptionSituation();
    this.renderCheckSituation("day");
    this.renderInspectionSituation("day");
    this.renderWorkNum("day");
    this.renderTotalJobs("day", "all");
    this.renderHalfYearWork();
    this.renderAccidentInformation();
    this.renderScenicComIn();
    this.renderGroupComIn();
  },
  mounted() {},

  methods: {
    getTab(value, flag) {
      this[flag](value);
      if ("renderWorkNum" === flag) {
        this.workCurrDataTab = value;
        this.renderTotalJobs(value, this.workCurrNameTab);
      }
    },
    handleWorkUpdata(flag) {
      this.workCurrNameTab = flag;
      this.renderTotalJobs(this.workCurrDataTab, flag);
    },
    //隐患统计 start
    async renderRiskNum(type) {
      const res = await queryRiskNum({ type, orgNo: this.orgNo });
      this.riskNumArr = res.param.data;
    },
    async renderRiskCategoryNum(type) {
      const res = await queryRiskCategoryNum({ type, orgNo: this.orgNo });
      this.riskCategoryNumData.data = res.param.data.map((item) => {
        return item.count;
      });
      this.riskCategoryNumData.tabName = res.param.data.map((item) => {
        return item.name;
      });
    },
    async renderRiskDepartNum(type) {
      const res = await queryRiskDepartNum({ type, orgNo: this.orgNo });
      let data = {
        tabName: [],
        data: {
          bar1Data: [],
          bar2Data: [],
          lineData: [],
        },
      };
      data.tabName = res.param.data.map((item) => {
        return item.name;
      });
      data.data.bar1Data = res.param.data.map((item) => {
        return item.allCount;
      });
      data.data.bar2Data = res.param.data.map((item) => {
        return item.finishCount;
      });
      data.data.lineData = res.param.data.map((item) => {
        return item.percentage;
      });
      this.riskDepartNumData = data;
    },
    async renderRiskCheck(type) {
      const res = await queryRiskCheck({ type, orgNo: this.orgNo });
      this.riskCheck = res.param.data;
    },
    //隐患统计end

    //巡检 start
    async renderInspectionNum(type) {
      const res = await queryInspectionNum({ type, orgNo: this.orgNo });
      this.inspectionNumArr = res.param.data;
    },
    async renderInspectionSituation(type) {
      let data = [];
      const res = await queryInspectionSituation({ type, orgNo: this.orgNo });
      data = res.param.data.map((item) => {
        return item / 100;
      });
      this.inspectionSituationArr = data;
    },
    async renderExceptionSituation() {
      const res = await queryExceptionSituation({ orgNo: this.orgNo });
      this.exceptionSituationData.data = res.param.data.map(
        (item) => item.count
      );
      this.exceptionSituationData.tabName = res.param.data.map(
        (item) => item.name
      );
    },
    async renderCheckSituation(type) {
      console.log(this.orgNo);
      const res = await queryCheckSituation({ type, orgNo: this.orgNo });
      this.checkSituation = res.param.data;
    },
    //作业统计

    async renderWorkNum(type) {
      const res = await queryWorkNum({ type, orgNo: this.orgNo });
      this.workNumArr = res.param.data;
    },
    async renderTotalJobs(type, category = "all") {
      const res = await queryTotalJobs({ type, category, orgNo: this.orgNo });
      this.totalJobsDataArr = res.param.data;
    },
    async renderHalfYearWork() {
      const res = await queryHalfYearWork({ orgNo: this.orgNo });
      this.halfYearWorkTabNameArr = res.param.data.map((item) => item.month);

      this.halfYearWorkNumArr = res.param.data.map((item) => item.num);
    },
    //事故统计
    async renderAccidentInformation() {
      const res = await queryAccidentInformation({ orgNo: this.orgNo });
      console.log(res.param.day, res.param.data);
      this.accidentInformationData = res.param.data;
      this.accidentInformationDay = res.param.day;
    },
    //客流
    async renderScenicComIn(type) {
      console.log(type);
      const res = await getScenicComIn({ orgNo: this.orgNo, state: type });
      this.scenicComInData = res.param.data;
      console.log(res.param.data);
    },
    async renderGroupComIn() {
      const res = await getGroupComIn({ orgNo: this.orgNo });
      this.traffic = res.param.data;
      console.log(res.param.data);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/mixin.less");
@import url("~style/var.less");
.statistical-analysis-container {
  width: 100%;
  height: 100%;
  .total {
    background: #fff;
    margin-top: 20px;
    padding: 10px 0;
    box-sizing: border-box;
    .title-wrap {
      display: flex;
      justify-content: space-between;
      .weather {
        margin-left: auto;
        font-size: 28px;
        margin-right: 20px;
      }
      .title {
        font-size: 32px;
        color: @words;
        display: flex;
        align-items: center;
        margin-left: 20px;
        &::before {
          content: "";
          display: inline-block;
          width: 6px;
          height: 30px;
          background: linear-gradient(0deg, #e0680f, #e68840);
          border-radius: 3px;
          margin-right: 10px;
        }
      }
    }

    .van-row {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      color: #3d4552;
      padding: 20px 20px;
    }

    .card-list {
      width: 696px;
      margin: 20px auto;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(212, 212, 212, 0.84);
      border-radius: 6px;
    }
    .safety-total-wrap {
      max-height: 400px;
      box-sizing: border-box;
      overflow-y: scroll;
      overflow-x: hidden;
      .van-row {
        font-weight: normal;
        .van-col {
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 28px 36px;
        }
        &:nth-of-type(1) {
          .van-col:first-of-type {
            height: 36px;
            background-image: url("~assets/img/no1.png");
          }
        }
        &:nth-of-type(2) {
          .van-col:first-of-type {
            height: 36px;
            background-image: url("~assets/img/no2.png");
          }
        }
        &:nth-of-type(3) {
          .van-col:first-of-type {
            height: 36px;
            background-image: url("~assets/img/no3.png");
          }
        }
      }
    }

    .error-msg {
      text-align: center;
      color: #ccc;
      line-height: 1.9;
    }
  }

  .accident-title {
    display: flex;
    align-items: center;
    height: 226px;
    background: linear-gradient(0deg, #5ce3fc 0%, #1f86ee 100%);
    .day-time {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-left: 45px;
      width: 203px;
      height: 203px;
      font-size: 20px;
      font-weight: bold;
      color: #4c9ad2;
      background-image: url("~assets/img/shield.png");
      background-repeat: no-repeat;
      background-size: contain;

      i {
        font-size: 28px;
      }
    }
    .slogan {
      margin-left: 41px;
      font-size: 34px;
      color: #fff;
      font-family: "雅痞-简";
    }
  }

  .van-grid-item {
    div {
      width: 100%;
      text-align: center;
      height: 100px;
      border-left: 4px solid @dark;
      border-right: 4px solid @dark;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-sizing: border-box;
      &.active {
        background: #e68840;
        p {
          &:first-of-type {
            color: #fff;
          }
          &:last-of-type {
            color: #fff;
          }
        }
      }
      p {
        &:first-of-type {
          color: @gray;
          font-size: 30px;
        }
        &:last-of-type {
          color: @label;
          font-size: 36px;
        }
      }
    }
  }
}
/deep/.card-twig-container {
  padding-left: 0;
  padding-right: 10px;
  &:first-of-type {
    .left,
    .right {
      color: #3d4552;
    }
  }
  .left {
    color: @gray;
  }
  .right {
    color: @gray;
  }
}
/deep/ .van-grid-item__content {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
/deep/ .van-tabs__line {
  background-color: transparent;
  background-image: @primary-linear;
}
/deep/ .van-tab__text--ellipsis {
  font-size: 26px;
}
</style>